import React, { useState } from 'react';
import s from './style.module.less';
import { Pagination } from '@knownsec/react-component';
import { WARNING_SECURITYEVENT_MAP2 as MAP2 } from '@/common/common';
const typeObj = { CRITICAL: 'yz', HIGH: 'gw', MEDIUM: 'zw', LOW: 'dw' };
const td = ['', 'CRITICAL', 'HIGH', 'MEDIUM', 'LOW', 'INFO', '结果'];
let num1 = 0;
/**
 * 根据type类型渲染
 */
export default function selfTable({ selfTableData = {}, type }) {
  const [pageInfo, setPageInfo] = useState({ page: 1, total: 0 });
  const [pageData, setPageData] = useState([]);
  const [beforeNum, setBeforeNum] = useState(3);
  const [bugArr, setBugArr] = useState([]);
  React.useMemo(() => {
    if (selfTableData.vul) {
      (type === 'vul' || !type) && setBugArr(Object.entries(selfTableData.vul));
    }
    if (type === 'vul') {
      num1 = -1;
      setBeforeNum(0);
    }
  }, [selfTableData]);
  React.useEffect(() => {
    setPageInfo({ page: 1, total: num1 + bugArr.length + 1 });
    setPageData(bugArr.slice(0, 10 - num1 - 1));
    setBeforeNum(num1 + 1);
  }, [selfTableData]);
  const changePage = (page) => {
    setPageInfo({ ...pageInfo, page: page });
    const bNum = 10 - beforeNum;
    if (page > 1) {
      setPageData(bugArr.slice((page - 2) * 10 + bNum, 10 * (page - 1) + bNum));
    } else {
      setPageData(bugArr.slice(0, bNum));
    }
  };

  const retTR = () => {
    let typeArr = ['securityEvent','change_check', 'risk_link'];
    if (type) {
      if (type === 'vul') {
        return null;
      } else {
        typeArr = [type];
      }
    }
    return typeArr.map((e) => {
      const entries = selfTableData[e] ? Object.entries(selfTableData[e]) : [];   
      if (entries[0]) {
        return entries.map(([a, b], i) => {
          let totalNum = 0;
          if (selfTableData.securityEvent) {
            typeArr.includes('securityEvent') &&
              (num1 = Object.values(selfTableData.securityEvent).length);
          }
          return (
            <tr key={i}>
              {i < 1 && <td rowSpan={e === 'securityEvent' ? num1 : 1}>{MAP2[e]}</td>}
              {td.map((tre, tri) => {
                totalNum += b[tre] || 0;
                const cname = typeObj[tre] || '';
                if (tri === 0) {
                  return <td>{a==='change_check'?'文本/图片/资源':MAP2[a]}</td>;
                } else if (tri == td.length - 1) {
                  return <td>{totalNum}</td>;
                } else {
                  return <td className={s[b[tre] ? cname : '']}>{b[tre] || 0}</td>;
                }
              })}
            </tr>
          );
        });
      } else {
        let dom = type ? (
          <tr>
            <td rowSpan={1}>{MAP2[e]}</td>
            <td colSpan={7}>暂无数据</td>
          </tr>
        ) : null;
        return dom;
      }
    });
  };
  const retTR2 = () => {
    if (type && type !== 'vul') {
      return null;
    }
    if (pageData[0]) {
      return pageData.map(([a, b], i) => {
        let totalNum = 0;
        return (
          <tr key={i}>
            {i < 1 && <td rowSpan={pageData.length}>漏洞</td>}
            {td.map((tre, tri) => {
              const cname = typeObj[tre] || '';
              totalNum += b[tre] || 0;
              if (tri === 0) {
                return <td>{a}</td>;
              } else if (tri == td.length - 1) {
                return <td>{totalNum}</td>;
              } else {
                return <td className={s[b[tre] ? cname : '']}>{b[tre] || 0}</td>;
              }
            })}
          </tr>
        );
      });
    } else {
      let dom = type ? (
        <tr>
          <td rowSpan={1}>漏洞</td>
          <td colSpan={7}>暂无数据</td>
        </tr>
      ) : null;
      return dom;
    }
  };
  return (
    <div className={s.tableBox}>
      <div>
        <table className={s.selfTable}>
          <thead>
            <tr className={s.head}>
              <td>监测项</td>
              <td>监测类型</td>
              <td>严重</td>
              <td>高危</td>
              <td>中危</td>
              <td>低危</td>
              <td>信息</td>
              <td>结果</td>
            </tr>
          </thead>
          {Object.keys(selfTableData)[0] ? (
            <tbody>
              {pageInfo.page === 1 && retTR()}
              {retTR2()}
            </tbody>
          ) : (
            <tbody>
              <tr>
                <td colSpan={8} className={s.empty}>
                  暂无数据
                </td>
              </tr>
            </tbody>
          )}
        </table>
      </div>

      {pageInfo.total > 10 && <Pagination
        key={Number(123)}
        className={s.pagination}
        current={pageInfo.page}
        showQuickJumper={false} // 前端分页无跳转和自定义当前条数
        showSizeChanger={false}
        pageSize={10}
        showTotal={(total) => `共${total}条`}
        total={pageInfo.total}
        onChange={(page) => {
          changePage(page);
        }}
      />}
    </div>
  );
}
